function getTime() {
    const now = new Date()
    let year = now.getFullYear()
    let month = now.getMonth() + 1
    month = month < 10 ? '0' + month : month
    let date = now.getDate()
    date = date < 10 ? '0' + date : date
    let hour = now.getHours()
    hour = hour < 10 ? '0' + hour : hour
    let minutes = now.getMinutes()
    minutes = minutes < 10 ? '0' + minutes : minutes
    let seconds = now.getSeconds()
    seconds = seconds < 10 ? '0' + seconds : seconds
    document.querySelector('.time').innerHTML = `${year}/${month}/${date} ${hour}:${minutes}:${seconds}`
}
getTime()
setInterval(function () {
    getTime()
}, 1000)



//初始化echarts的实例
var myChart = echarts.init(document.getElementById('boxnav'))

// 调用实例中的setOption绘制图表
function test1() {
    myChart.setOption({
        // tooltip: {
        //     trigger: 'axis',
        //     axisPointer: { // 坐标轴指示器，坐标轴触发有效
        //         type: 'shadow', // 默认为直线，可选为：'line' | 'shadow'
        //     }
        // },
        // 指定图形与Dom距离
        grid: {
            left: '3%',
            right: '4%',
            bottom: '5%',
            top: '2%',
            // y轴刻度上文字与Dom边界保留距离
            containLabel: true
        },
        xAxis: {
            // 设置x轴不显示
            show: false
        },
        // 需要使用两个y轴，使用列表存储
        yAxis: [{
            type: 'category',
            data: ['字段9', '字段8', '字段7', '字段6', '字段5', '字段4', '字段3', '字段2', '字段1'],
            // 将数据显示方式倒转
            inverse: true,
            // 不显示y轴刻度线
            axisLine: {
                show: false
            },
            // 不显示y轴刻度值
            axisTick: {
                show: false
            },
            // 设置第一个y轴上的文字颜色
            axisLabel: {
                color: "#9aa4bb",
                fontSize: 16
            }
        },
        {
            // 先设置第二个y轴显示
            show: true,
            data: [8390, 4664, 3506, 2456, 2158, 1968, 1623, 1619, 1514],
            // 将数据显示方式倒转
            inverse: true,
            // 不显示y轴刻度线
            axisLine: {
                show: false
            },
            // 不显示y轴刻度值
            axisTick: {
                show: false
            },
            // 设置第二个y轴上文字的颜色与字号
            axisLabel: {
                textStyle: {
                    fontSize: 16,
                    color: "#9aa4bb"
                }
            },
        }
        ],
        series: [
            {
                // name: '2011年',
                type: 'bar',
                data: [70, 56, 52, 48, 43, 40, 34, 30, 25],
                // 设置柱子宽度
                barWidth: 15,
                // 设置第一个y轴显示的深浅度，第二个显示在第一个之上
                yAxisIndex: 0,
                // 注意之间的距离
                barCategoryGap: 0,
                // 设置柱子的位置，柱子上显示的内容
                label: {
                    show: true,
                    // 文字显示最左边
                    position: "right",
                    // {c} 表示数值，{a}表示serie名,{b}表示系列名
                    formatter: "{c}%",
                    color: "#9aa4bb"
                },
                itemStyle: {
                    normal: {
                        color: function (params) {
                            let colorList = ['#02aec5', '#0097f3', '#03c39c', '#02b3bb', '#02bea7', '#01a9d0', '#019de7', '#7dbe83', '#5187d9']
                            return colorList[params.dataIndex]
                        },
                        // 设置柱子为圆角
                        barBorderRadius: 10
                    },
                },
            },
            {
                name: '2012年',
                type: 'bar',
                yAxisIndex: 1,
                data: [100, 100, 100, 100, 100, 100, 100, 100, 100],
                barWidth: 15,
                barCategoryGap: 50,
                //关键代码
                showBackground: true,//开启背景
                backgroundStyle: {//设置背景样式
                    color: "rgba(14, 53, 98, 1)",
                    barBorderRadius: 10,
                },

                itemStyle: {
                    // 设置第二个y轴柱子无颜色
                    color: "none",
                    // 设置第二个y轴柱子有边框
                    // borderColor: "#00c1de",
                    // 设置第二个y轴柱子的宽度
                    borderWidth: 3,
                    // 设置第二个y轴柱子边框为圆角
                    barBorderRadius: 15,
                }

            },


        ]

    });
}
test1()

